<template>
	<view style="content">
		<uni-list-item>
			<template v-slot:header>
				<view class="flexrowcenter">
					<text class="text-df">电话报警</text>
				</view>

			</template>
			<template v-slot:body>
				<view class="flexrowcenter flex1 margin-left-sm">
					<circle-progress width=140 :percent='voicepre' inactiveColor='#e4e4e4' activeColor='#1D39C4'>
						<text class="font-12">{{voicepredesc }}</text>
					</circle-progress>

					<view class="flexcolumn">
						<view class="flexrow">
							<text class="text-sm text-gray" style="width:60px">剩余</text>
							<text class="text-df text-black">{{voiceAmount}}条</text>
						</view>
						<view class="flexrow">
							<text class="text-sm text-gray" style="width:60px">已经使用</text>
							<text class="text-df text-black">{{voiceTotal - voiceAmount}}条</text>
						</view>
					</view>
				</view>
			</template>

			<template v-slot:footer>
				<view class="mini_bluebg_whitetext_button" @click="gotopay('voice')" v-if="$auth.hasPermi('pay:pc:paycommit')">
					立即充值
				</view>
			</template>


		</uni-list-item>

	<uni-list-item>
			<template v-slot:header>
				<view class="flexrowcenter">
					<text class="text-df">短信报警</text>
				</view>

			</template>
			<template v-slot:body>
				<view class="flexrowcenter flex1 margin-left-sm">

					<circle-progress width=140 :percent='smspre' inactiveColor='#e4e4e4' activeColor='#fc9d15'>
						<text class="font-12">{{smspredesc }}</text>

					</circle-progress>

					<view class="flexcolumn">
						<view class="flexrow">
							<text class="text-sm text-gray" style="width:60px">剩余</text>
							<text class="text-df text-black">{{smsAmount}}条</text>
						</view>
						<view class="flexrow">
							<text class="text-sm text-gray" style="width:60px">已经使用</text>
							<text class="text-df text-black">{{smsTotal -smsAmount }}条</text>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:footer>
				<view class="mini_bluebg_whitetext_button" @click="gotopay('sms')"
        			v-if="$auth.hasPermi('pay:pc:paycommit')"
        		>
					立即充值
				</view>
			</template>
		</uni-list-item>
		<uni-list-item style="margin-top: 10px;" clickable @click="gotoorderlist" showArrow="" title="订单记录">
		</uni-list-item>
	</view>
</template>

<script>
import {
  iotAmountGet
} from "@/api/mine/index"
import authMixin from '@/mixin/auth.js'
	export default {
    mixins: [authMixin],
		data() {
			return {
        smsAmount:0,
        smsTotal:0,
        voiceAmount:0,
        voiceTotal:0,
        voicepre:0,
        voicepredesc:'0/0',
        smspre:0,
        smspredesc:'0/0'
			}
		},
    onLoad(query){
      const that = this
      uni.$on('refresh-tariff-manage', function(item) {
        console.log('refresh-tariff-manage>>>>>',item)
        that.getData()
      })
    },
    onUnload() {
      uni.$off('refresh-police-list')
    },
    onReady(){
     this.getData()
    },
		methods: {
      getData(){
        iotAmountGet().then(res=>{
          const data = res.data
          this.smsAmount =data.smsAmount
          this.smsTotal=data.smsTotal
          if(data.smsTotal <= data.smsAmount){
            this.smspre = 100
          }else{
            this.smspre = parseFloat(data.smsAmount/data.smsTotal)
          }
          this.smspredesc = data.smsAmount +'/'+ data.smsTotal
          this.voiceAmount=data.voiceAmount
          this.voiceTotal=data.voiceTotal
          if(data.voiceTotal <= data.voiceAmount){
            this.voicepre = 100
          }else{
            this.voicepre = parseFloat(data.voiceAmount/data.voiceTotal)
          }
          this.voicepredesc = data.voiceAmount+ '/'+ data.voiceTotal
        })
      },
			gotopay(type) {
				  uni.navigateTo({
				   	url: '/pages/mine/phone-sms-recharge/phone-sms-recharge?type='+type
				})
				
			},
			gotoorderlist() {
				console.log('order-record>>')
				uni.navigateTo({
					url: '/pages/mine/order-record/order-record'
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;
		background-color: #f5f6f7;
	}

	.payment_button {

		color: #ffffff;
		background-color: #1279fc;

		justify-content: center;
		align-items: center;
		align-self: center;
		text-align: center;
		display: flex;
		width: 80px;
	
		height: 30px;
		border-radius: 12rpx;

	}

	::v-deep .uni-list-item__container {
		padding: 15px 8px ;
	}
</style>